<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
</head>
<body>
    <input type="text" id="city" placeholder="输入城市 查天气">
    <div id="show"></div>
    <script>
        var city = document.getElementById("city");
        var show = document.getElementById("show");
        city.onblur = function () {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("get","https://restapi.amap.com/v3/weather/weatherInfo?key=d5c8d18cf2ab8c647690178ddfb6f606&city="+city.value,true);//使用高德地图API
            xmlhttp.send(null);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    data = JSON.parse(data);
                    var lives = data.lives[0];
                    console.log(data);
                    console.log(lives);
                    show.innerHTML = "";
                    if (data.count == 1) {
                        show.innerHTML = lives.city + "的天气为" + lives.weather + "，温度为" + lives.temperature + "℃，风向" + lives.winddirection + "，风力" + lives.windpower + "级"
                    } else {
                        show.innerHTML = "暂无数据";
                    }
                }
            }
        }
    </script>
</body>
</html>